<template>
	<main>
		<div v-my-directive class="QAHead">
			<div class="questionnav line">
				<div class="columnLayout interval">
					<div class="center QAfont Horizontalspacing">
						<span>问答社区</span>
						<div class="iconfont icon-dian center maxfont bold fonfff"></div>
						<span class="fonfff">有问必答</span>
					</div>
					<div class="Horizontalspacing interval fonfff">
						<div class="Horizontalspacing minxgap">
							<div class="iconfont icon-duigouxiao fonfff minfont center"></div>
							<div>学习技能、解决问题</div>
						</div>
						<div class="Horizontalspacing minxgap">
							<div class="iconfont icon-duigouxiao fonfff minfont center"></div>
							<div>学习技能、解决问题</div>
						</div>
						<div class="Horizontalspacing minxgap">
							<div class="iconfont icon-duigouxiao fonfff minfont center"></div>
							<div>学习技能、解决问题</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main">
			<div>
				<div class="content">
					<div class="Genericpadding Horizontalspacing interval">
						<div v-for="(item, index) in nav" :key="index" class="QAgreybox" @click="value = item.id">{{ item.name }}</div>
					</div>
					<!--  -->
					<div class="Genericpadding columnLayout">
						<div class="columnLayout interval">
							<!-- <ul class="questionmoney Horizontalspacing interval">
								<span class="center">悬赏金额</span>
								<li class="questionmoney-v" v-for="(value, key) of ArticlePrice" :key="key" @click="Price = value" :class="`${value == Price ? 'Priceac' : ''}`">{{ value + 'USDT' }}</li>
								<div class="Horizontalspacing minxgap"><input class="qainput" type="text" name="" id="" placeholder="自定义" v-model="Price" /><span class="line center">USDT</span></div>
							</ul> -->
							<div class="Horizontalspacing minxgap">
								<span class="center">标题:</span><input v-model="title" class="qainputs" type="text" placeholder="请输入问题标题" />
								<el-select class="setselect" v-model="value" placeholder="请选择">
									<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
								</el-select>
							</div>
							<!-- 输入框 -->

							<!-- 富文本开始 -->
							<div class="qalyougrid minxgap">
								<span class="center">内容:</span>
								<div>
									<dexedi height="500px" width="779.14px" ref="child"></dexedi>
								</div>
							</div>
							<!-- 富文本结束 -->
							<div class="qzbuttons center" @click="set">发布问题</div>
							<div class="qawing columnLayout interval">
								<div class="Green">友情提示：</div>
								<div class="columnLayout minaxgap"><span>请勿重复提交内容</span><span>请勿提交违法违规内容</span><span>提交违法违规内容者将给予永久封号</span> </div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div>
				<qaleft></qaleft>
			</div>
		</div>
	</main>
</template>
<script>
	import { mapState } from 'vuex'
	import qaleft from './../components/qaleft'
	import { dataRequest as api } from '@/api/api'
	import dexedi from './../components/dexedi'
	// setquestions
	export default {
		name: 'name',
		computed: {
			...mapState(['logon', 'user']),
		},
		components: {
			// 组件
			qaleft,
			dexedi,
		},
		data() {
			return {
				//返回值
				nav: '',
				options: [],
				value: '',
				ArticlePrice: [1, 2, 5, 10, 15],
				Price: '',
				title: '',
			}
		},
		methods: {
			// 函数
			async get() {
				// 获取分类
				let nav = await api(['getqacat', ''])
				if (nav.code == 200) {
					this.nav = nav.data
					this.nav.forEach(element => {
						let array = {}
						array.value = element.id
						array.label = element.name
						this.options.push(array)
					})
					this.value = this.options[0].value
				}
			},
			async set() {
				// 文章标题
				// 文章内容
				// 悬赏金额
				console.log(this.logon, this.user)
				let value = this.$refs.child.delta()
				let arr = { title: this.title, content: value[0].ops, description: this.title, pid: this.value, Price: this.Price }
				arr = await api(['setquestions', arr])
				if (arr.code == 200) {
					this.$message.success('发送成功')
					this.$refs.child.setdelta()
					this.title = ''
				} else {
					this.$message.error('发送失败')
				}
			},
		},
		mounted() {
			// 生命周期:

			this.get()
		},
	}
</script>
<style>
	.setselect .el-input {
		width: 120px;
		height: 30px;
	}
</style>
